<template>
  <view class="pro-cons" v-if="data.length">
    <view class="cons-left">
      <template v-for="(item, index) in data">
        <template v-if="(index + 1) % 2 === 1">
          <product :info="item" @toMaskpay="tomask"></product>
        </template>
      </template>
    </view>
    <view class="cons-right">
      <template v-for="(item, index) in data">
        <template v-if="(index + 1) % 2 === 0">
          <product :info="item" @toMaskpay="tomask"></product>
        </template>
      </template>
    </view>
  </view>
</template>
<script setup>
import { toRefs } from "vue";
import product from "./item.vue";

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
});

const { data } = toRefs(props);
</script>

<style>
.pro-cons {
  width: 100%;
  padding: 26rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
</style>
